﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title>动态下拉列表</title>
</head>
<script language=javascript>
    //定义一个二维数组aArray,用于存放城市名称。
    let aCity = new Array();
    aCity[0] = new Array();
    aCity[1] = new Array();
    aCity[2] = new Array();
    aCity[3] = new Array();
    //赋值，每个省份的城市存放于数组的一行。
    aCity[0][0] = "--请选择--";
    aCity[1][0] = "--请选择--";
    aCity[1][1] = "郑州市";
    aCity[1][2] = "洛阳市";
    aCity[1][3] = "开封市";
    aCity[1][4] = "南阳市";
    aCity[1][5] = "周口市";
    aCity[2][0] = "--请选择--";
    aCity[2][1] = "石家庄市";
    aCity[2][2] = "秦皇岛市";
    aCity[2][3] = "张家口市";
    aCity[3][0] = "--请选择--";
    aCity[3][1] = "杭州市";
    aCity[3][2] = "嘉兴市";
    aCity[3][3] = "温州市";
    function ChangeCity() {
        let i, iProvinceIndex;
        iProvinceIndex = document.frm.optProvince.selectedIndex;
        iCityCount = 0;
        while (aCity[iProvinceIndex][iCityCount] != null)
            iCityCount++;
        //计算选定省份的城市个数
        document.frm.optCity.length = iCityCount;//改变下拉菜单的选项数
        for (i = 0; i <= iCityCount - 1; i++)//改变下拉菜单的内容
            document.frm.optCity[i] = new Option(aCity[iProvinceIndex][i]);
        document.frm.optCity.focus();
    }
</script>
<BODY ONfocus=ChangeCity()>
    <H3>选择省份及城市</H3>
    <FORM NAME="frm">
        <P>
            省份：
            <SELECT NAME="optProvince" SIZE="1" ONCHANGE=ChangeCity()>
                <OPTION>--请选择--</OPTION>
                <OPTION>河南省</OPTION>
                <OPTION>河北省</OPTION>
                <OPTION>浙江省</OPTION>
            </SELECT>
        </P>
        <P>
            城市：
            <SELECT NAME="optCity" SIZE="1">
                <OPTION>--请选择--</OPTION>
            </SELECT>
        </P>
    </FORM>
</BODY>
</html>


